/* eslint-disable */


import React from 'react';
import {ScrollView, Text, View, Image} from "@tarojs/components";
// import a from '@/assets/images/tabbar/a.png'
import {Swipe} from "@nutui/nutui-react-taro";

interface Prod {
  img: string
  txt: string
}


const styles = {
  goodsListContainer: {
    width: '100%',
    padding: '10px'
  },
  stickyHeader: {
    position: 'sticky',
    top: '0',
    backgroundColor: '#fff',
    zIndex: '100',
    borderBottom: '1px solid #eee',
    padding: '10px'
  },
  goodsItem: {
    padding: '10px',
    borderBottom: '1px solid #f0f0f0'
  }
};

const prods: Prod[] = [
  {
    img: 'https://pics0.baidu.com/feed/4610b912c8fcc3ce63a9f953a3bc2286d53f2068.jpeg?token=568b9df652810361c4c2b36e7334c46b',
    txt: '1',
  },
  {
    img: 'https://pics0.baidu.com/feed/ca1349540923dd54cfa476aee0f047d09e82482d.jpeg?token=8663109bbf73ab5870f0e7ae05751a7d',
    txt: '22',
  },
  {
    img: 'https://pics0.baidu.com/feed/0b7b02087bf40ad1d4e4b5ea64d5e5d1a8eccebb.jpeg?token=8a70e2660fbe91baa6693eed55ddd238',
    txt: '33',
  },
  {
    img: 'https://pics0.baidu.com/feed/03087bf40ad162d932cf170d20265de28b13cd82.jpeg?token=77a79e801127301b6df58501c8abaff3',
    txt: '44',
  },
  {

    img: 'https://pics0.baidu.com/feed/37d12f2eb9389b506f5395a6b5cc11d3e5116e99.jpeg?token=fe01402e2076bf48a6cf62d576ee7615',
    txt: '55',
  },
  {
    img: 'https://image.baidu.com/search/detail?ct=503316480&z=0&tn=baiduimagedetail&ipn=d&cl=2&cm=1&sc=0&sa=vs_ala_img_datu&lm=-1&ie=utf8&pn=6&rn=1&di=7523999300557209601&ln=0&word=%E5%9B%BE%E7%89%87&os=2515485852,2382506667&cs=3142980186,2358570891&objurl=http%3A%2F%2Ffuwu.jlc.com%2Fnw%2Fthumbnail%2F8613816169529511936&bdtype=0&simid=2668098,918978925&pi=0&adpicid=0&timingneed=&spn=0&is=0,0&lid=d276bf790003d3dc',
    txt: '66',
  },
]

// 定义一个函数式组件，使用 React.FC 进行类型注解
const ListTest_: React.FC = () => {
  const scrollStyle = {
    height: '780px',
    width: '350px',
    padding: '20px',
    backgroundColor: '#5e5d59'
  }
  const scrollTop = 0
  const Threshold = 20
  const onScrollToUpper = () => {

  }
  const onScroll = () => {

  }

  return (
    <ScrollView
      className='scrollview'
      showScrollbar={true}
      scrollY={true}
      scrollWithAnimation
      scrollTop={scrollTop}
      style={scrollStyle}
      lowerThreshold={Threshold}
      upperThreshold={Threshold}
      onScrollToUpper={onScrollToUpper} // 使用箭头函数的时候 可以这样写 `onScrollToUpper={this.onScrollToUpper}`
      onScroll={onScroll}
    >


      {
        prods.map((item, _ind) => {
          return (
            <View className="goods-list-container" style={styles.goodsListContainer}>
              <View className="sticky-header" style={styles.stickyHeader}>商品列表头部</View>
              <Swipe1 item={item}/>
            </View>
        )
        })
      }


    </ScrollView>
  )
}

interface Props {
  item: Prod
}

const rightA = () => {
  return (
    <View style={{ display:'flex'}}>
      <View style={{ width: '50px', height: '150px', backgroundColor: '#e16e6e' }}>12</View>
      <View style={{ width: '50px', height: '150px', backgroundColor: '#12bbd8' }}>22</View>
      <View style={{ width: '50px', height: '150px', backgroundColor: '#4368e1' }}>33</View>
    </View>
  )
}

export const Swipe1: React.FC<Props> = ({item}) => {
  return (

    <Swipe style={styles.goodsItem}
      rightAction={rightA()}
    >
      <ProdItem item={item}/>
    </Swipe>
  )
}


export const ProdItem: React.FC<Props> = ({item}) => {
  return (
    <View key={item.img} style={{margin: '10px'}}>
      <View style={{width: '300px', height: '150px', backgroundColor: '#dcaa71', margin: '20px'}}>
        <Image src={'http://gips1.baidu.com/it/u=1971954603,2916157720&fm=3028&app=3028&f=JPEG&fmt=auto?w=1920&h=2560'} style={{width: '200px', height: '80px'}}/>
        <Text> {item.txt}</Text>
      </View>
    </View>
  )
}


export const  ListTest = React.memo(ListTest_)

//

